<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">

        <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>

        <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">{{item.meta.name }}</el-breadcrumb-item>
        </el-breadcrumb>

    </div>  
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
         breadList: []
    }
  },
 watch: {
    // 监听路由
    $route(val) {
    // 调用获取路由数组方法
    this.getBreadList(val);
    // console.log(val)
    }
 },
  methods: {
   
     getBreadList(val) {
        // 过滤路由matched对象
        if (val.matched) {
            console.log(val.matched)
            let matched = val.matched.filter(item => item.meta && item.meta.name);
             //console.log(matched)
            // 拿到过滤好的路由v-for遍历出来
            this.breadList = matched;
      }
    }
  }
}
</script>

<style scoped>

</style>